<template>
	<div style="margin-top: 5vh;">
		<van-form>
			<van-cell-group inset>
				<van-field v-model="phonenumber" name="手机号" placeholder="手机号" class="form-input" input-align="center" />
				<van-field v-model="checkcode" name="验证码" placeholder="验证码" class="form-input" input-align="center"
					style="position: relative;">
					<template #button>
						<van-button color="#67C23A" type="primary" id="checkcode-btn" @click="getCheckCode"
							:disabled="checkCodeButtonDisable">
							<div v-show="!checkCodeButtonDisable">
								获取验证码
							</div>
							<div v-show="checkCodeButtonDisable">
								再次获取 {{checkCodeTime}}秒
							</div>
							</van-button>
					</template>
				</van-field>

			</van-cell-group>
		</van-form>
	</div>
</template>

<script>
	import url from '@/assets/url.json'
	import {
		showDialog,
		showNotify,
		showLoadingToast,
		closeToast
	} from 'vant';


	export default {
		data() {
			return {
				checkCodeButtonDisable: false,
				phonenumber: "",
				checkcode: "",
				checkCodeTime: 0,
				
			}

		},

		methods: {
			getCheckCode() {
				var reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
				reg.test(this.phonenumber)
				if (reg.test(this.phonenumber)) {
					showLoadingToast({
						message: '加载中...',
						forbidClick: true,
						duration:0
					});
					// this.sendCheckCodeReq();
					setTimeout(this.sendCheckCodeReq, 500);
				} else {
					showNotify({
						type: 'warning',
						message: '手机号格式错误'
					});
				}
			},
			sendCheckCodeReq() {
				this.lockButton();
				this.$axios({
					url: url.ip + "/api-user/user/checkCode/" + this.phonenumber,
					method: 'GET',
				}).then((res) => {
					if (res.data.code == -1) {
						showNotify({
							type: 'warning',
							message: res.data.message
						});
						return
					}
					closeToast(true);
					showDialog({
						title: '新消息',
						message: '[锦江帮帮] 您的验证码是:' + res.data.data +
							',请勿转发或告知他人, 此验证码有效时间5分钟, 如非本人操作, 请忽略本短信.',
						confirmButtonText: '填入'
					}).then(() => {
						this.checkcode = res.data.data;
					})

				}).catch((err) => {
					closeToast(true);
					console.log(err);
				})
			},
			getData() {
				return {
					phonenumber: this.phonenumber,
					checkcode: this.checkcode
				}
			},
			lockButton() {
				this.checkCodeTime = 60;
				this.checkCodeButtonDisable = true;
				
				let time = setInterval(()=> {
					this.checkCodeTime--
					if(this.checkCodeTime<0){
						this.checkCodeButtonDisable = false;
						clearInterval(time)
					}
					
				}, 1000);
				
			}
			
		}
	};
</script>

<style>
	.form-input {

		height: 8vh;
		background-color: #F0F2F5;
		margin-bottom: 2vh;
		border-radius: 4vh;
		line-height: 5vh;
		font-size: 2.5vh;
	}

	#checkcode-btn {
		border-radius: 4vh;
		height: 7.5vh;
		position: absolute;
		top: -1vh;
		right: -2vh;
	}
</style>